<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>${fileName}</title>
	<link rel="icon" href="/images/logo.ico">
    <script src="/js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="/js/simpleXML.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/simpleXML.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0 30px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        #demo {
            width: 100%;
            height: 100%;
            color: white;
            background: black;
            font-size: 16px;
        }

        .action-content {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .action-content-main {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
        }

        .panel-title {
            padding: 10px 15px;
            border-bottom: 1px solid #0000;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
            display: flex;
            align-items: center;
        }

        .panel-title-name {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
            color: inherit;
            margin-right: 28px;
        }

        .panel-content {
            padding: 15px;
            overflow: hidden;
            overflow-y: auto;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var offsetH = $(document).height() - 100;
            let xml = $("#textArea").val();
            $('.panel-content').css('height', offsetH + 'px');
            $("#dynamicXML-output").simpleXML({ xmlString: xml });

            var queryParams = parseQueryString(location.search)
            if (queryParams.charsetName != null && queryParams.charsetName != '' ) {
                $("#charsetNameId").val(queryParams.charsetName);
            }

            function parseQueryString(url) {
                var result = {}
                if (url.indexOf('?') > -1) {
                    var str = url.split('?')[1];
                    var temp = str.split('&');
                    for (var i = 0; i < temp.length; i++) {
                        var temp2 = temp[i].split('=');
                        result[temp2[0]] = temp2[1];
                    }
                }
                return result;
            }

            $("#charsetNameId").change(function () {
                var newCharset = $("#charsetNameId").val();

                if (newCharset != null && newCharset != '') {
                    queryParams['charsetName'] =  newCharset
                } else {
                    delete queryParams.charsetName
                }

                var path = "?";
                for (const i in queryParams) {
                    path = path + i + "=" + queryParams[i] + "&"
                }
                path = path.slice(0, path.length - 1)

                window.location.href = path
            })
        })
    </script>
</head>

<body style="height: 100vh" oncontextmenu=self.event.returnValue=false>
    <div id="wm_div_id" style="pointer-events: none !important; display: block !important"></div>
    <div class="action-content">
        <div class="action-content-main">
            <div class="panel-title">
                <h4 class="panel-title-name">${fileName}</h4>
                <span style="margin-left: 5px">
                    文件编码： <select id="charsetNameId" name="charsetName">
                    <option name="charsetName" value="">请选择</option>
                    <option name="charsetName" value="gbk">gbk</option>
                    <option name="charsetName" value="utf-8">utf-8</option>
                    </select>
                </span>
            </div>
            <textarea id="textArea" style="display: none;">${textData}</textarea>
            <div class="panel-content" id="xml">
                <div id="dynamicXML-output"></div>
            </div>
        </div>
    </div>
</body>
<script src="/js/watermark.js"></script>
<script src="/js/index.js"></script>
</html>